<template>
  <div class="sellerdetail-wrapper">
    <div class="sellerdetail-content">

   
    <el-row class="seller-wrapper">
      <div class="img-wrapper">
        <img
          :src="orderData.product_img ? orderData.product_img : require('@/assets/hall/mall_default.jpg')"
          alt
          class="img"
        />
      </div>
      <div class="info-wrapper">
        <div class="state">
          <img :src="orderState(orderData.start_status)" />
        </div>
        <div class="name">
          <i class="label-category">{{orderData.product_area}}</i>
          <span v-show="orderData.product_name" class="product_name">{{orderData.product_name}}</span>
          <span v-show="orderData.product_place" class="product_name">/{{orderData.product_place}}</span>
          <span v-show="orderData.product_style" class="product_name">/{{orderData.product_style}}</span>
        </div>
        <div class="value-wrapper">
          <el-row class="info-p">
            <span class="title">总价值：</span>
            <span class="price">
              ￥
              <span class="count">{{orderData.product_amount}}</span>
            </span>
          </el-row>
          <el-row class="info-p">
            <span class="title">总代理订金：</span>
            <span class="price">
              ￥
              <span class="count">{{orderData.product_amount_deposit}}</span>
            </span>
          </el-row>
        </div>
        <el-row class="info-p">
          <span class="title">所在仓库：</span>
          {{orderData.product_warehouse}}
        </el-row>
        <el-row class="info-p">
          <span class="title">库存：</span>
          {{orderData.real_stock}}
          <span
            v-show="orderData.product_unit"
          >{{orderData.product_unit}}</span>
        </el-row>
        <el-row class="info-p">
          <span class="title">每份订金：</span>
          {{'￥' + orderData.agent_each_copies_deposit}}
        </el-row>
        <el-row class="info-p">
          <span class="title">单价：</span>
          <span>{{orderData.product_price_agent}}</span>
          <span v-show="orderData.product_unit">/{{orderData.product_unit}}</span>
        </el-row>
        <el-row class="info-p">
          <span class="title">代理费率：</span>
          {{(orderData.agent_rate * 100).toFixed(4) + '%'}}
        </el-row>
        <el-row class="info-p" v-if="orderData.agency_stage_max <= '0'">
          <span class="title">代理期限：</span>
          {{orderData.product_date ? orderData.product_date + '个月' : '无限期'}}
        </el-row>
        <el-row class="info-p" v-else>
          <span class="title">代理期限：</span>
          {{orderData.product_date +'~'+ orderData.agency_stage_max +'个月'}}
        </el-row>
      </div>
    </el-row>
    <el-row class="other-wrapper">
      <el-col :xs="24" :sm="24" :lg="5" class="store-info-wrapper">
        <store-info :information="storeData"></store-info>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="19">
        <el-tabs type="border-card">
          <el-tab-pane label="代理详情">
            <order-detail
              :order-detail="agentDetail"
              :agent-list="agentList"
              :order-data="orderData"
            ></order-detail>
          </el-tab-pane>
          <el-tab-pane label="库存跟踪" v-if="orderData.is_deposit == 0">
            <stock-monitor v-if="stockFlag" :stock-detail="stockDetail"></stock-monitor>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
     </div>
  </div>
</template>
<script>
import OrderDetail from "./components/order-detail";
import StockMonitor from "./components/stock-monitor";
import StoreInfo from "../agency/components/store-info";
import {
  getAgentOrder,
  getStoreDetail,
  getAgentDetail,
  getAgentList,
  getStockDetail,
} from "@/api/myagency";

export default {
  data() {
    return {
      orderData: {},
      storeData: {},
      agentDetail: [],
      agentList: {},
      stockDetail: {},
      stockFlag: false,
    };
  },
  created() {
    this._getAgentOrder();
    this._getStoreDetail();
    this._getAgentDetail();
    this._getAgentList();
    this._getStockDetail();
  },
  computed: {},
  methods: {
    _getAgentOrder() {
      getAgentOrder({ order_id: this.$route.params.id }).then((res) => {
        this.orderData = res.data;
        console.log("商品详情", this.orderData);
      });
    },
    _getStoreDetail() {
      getStoreDetail({ order_id: this.$route.params.id }).then((res) => {
        this.storeData = res.data;
      });
    },
    _getAgentDetail() {
      getAgentDetail({ order_id: this.$route.params.id }).then((res) => {
        this.agentDetail.push(res.data);
      });
    },
    _getAgentList() {
      getAgentList({ order_id: this.$route.params.id }).then((res) => {
        if (res.code == 1) {
          this.agentList = res.data;
        }
        console.log("代理收支", this.agentList);
      });
    },
    _getStockDetail() {
      getStockDetail({ order_id: this.$route.params.id }).then((res) => {
        this.stockDetail = res.data;
        this.stockFlag = true;
      });
    },
    orderState(state) {
      let s = state || 0;
      switch (state) {
        case 1:
          return require("@/assets/myagency/label1.png");
        case 2:
          return require("@/assets/myagency/label2.png");
        default:
          return require("@/assets/myagency/label3.png");
      }
    },
  },
  components: {
    OrderDetail,
    StockMonitor,
    StoreInfo,
  },
};
</script>
<style lang="scss" scoped>
.sellerdetail-wrapper {
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  .sellerdetail-content{
    min-width: 1460px;
  }
  .seller-wrapper {
    background: #fff;
    display: flex;
    padding: 50px 28%;
    .img-wrapper {
      flex: 0 0 47.5%;
      width: 47.5%;
      height: 0;
      padding-top: 47.5%;
      position: relative;
      img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
      }
    }
    .info-wrapper {
      flex: 1;
      margin-left: 30px;
      padding: 8px 0;
      position: relative;
      .state {
        position: absolute;
        top: -15px;
        right: -22px;
        z-index: 99;
        width: 100px;
        height: 80px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .info-p {
        display: flex;
        line-height: 34px;
        padding: 0 10px;
        font-size: 14px;
        color: #333;
        .title {
          flex: 0 0 100px;
          color: #999;
          font-size: 14px;
        }
      }
      .name {
        display: flex;
        width: 370px;
        .product_name {
          color: #333;
          font-size: 20px;
          font-weight: bold;
          height: 22px;
          line-height: 22px;
          vertical-align: top;
        }
      }

      .value-wrapper {
        background: #fffaf7;
        margin: 20px 0 10px;
        .price {
          color: #fa4e33;
          .count {
            font-size: 24px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
.other-wrapper {
  margin-top: 20px;
  .store-info-wrapper {
    .store-info {
      width: 90%;
      margin-top: 0;
    }
  }
}
</style>
<style lang="scss">
.sellerdetail-wrapper {
  .el-tabs--border-card {
    box-shadow: none;
  }
}
</style>